import React, { useState } from 'react';
import { Space, Table } from 'antd';
import { listCenter } from './constants';
import ButtonStep from './button/button';
import ModalChart from './modelChart';

const { Column } = Table;

interface DataType {
  key: React.Key;
  firstName: string;
  lastName: string;
  age: number;
  address: string;
  tags: string[];
  templateCode?: string;
  templateName?: string;
  couponTypeName?: string;
  couponQuota?: string;
  validDate?: string;
  validDateName?: string;
  availableProductType?: string;
  createDate?: string;
  createUser?: string;
  isModify?: boolean;
  id?: number;
}

const Chart: React.FC = () => {
  const [openKey, setOpenKey] = useState<0 | 1 | 2 | 3>(0);

  const changeItem = (val: string) => {
    switch (val) {
      case '查看':
        setOpenKey(1);
        break;
      case '删除':
        setOpenKey(2);
        break;
      case '修改':
        setOpenKey(3);
        break;
      default:
        setOpenKey(0);
    }
  };

  return (
    <>
      <Table dataSource={listCenter}>
        <Column title="CRMID" dataIndex="templateCode" />
        <Column title="回归" dataIndex="templateName" />
        <Column title="券类型" dataIndex="couponTypeName" />
        <Column title="金额" dataIndex="couponQuota" />
        <Column title="天数" dataIndex="validDate" />
        <Column title="说明" dataIndex="validDateName" />
        <Column title="商品范围" dataIndex="availableProductType" />
        <Column title="创建时间" dataIndex="createDate" />
        <Column title="创建人" dataIndex="createUser" />
        <Column
          title="是否使用"
          dataIndex="isModify"
          key="10"
          render={(text) => <div>{text === undefined ? '' : text ? '是' : '否'}</div>}
        />
        <Column
          title="操作"
          key="action"
          render={(_: any, item: DataType) => (
            <Space size="middle">
              <ButtonStep item={item} changeItem={changeItem}>
                查看
              </ButtonStep>
              <ButtonStep item={item} changeItem={changeItem}>
                修改
              </ButtonStep>
              <ButtonStep item={item} changeItem={changeItem}>
                删除
              </ButtonStep>
            </Space>
          )}
        />
      </Table>
      <ModalChart openKey={openKey} changeItem={changeItem} />
    </>
  );
};

export default Chart;
